{extend name="main"}
{block name="style"}
<style>
    .demonstration {
        color: #8492a6;
        font-size: 14px;
        margin-bottom: 20px
    }

    .grid {
        width: 80%;
        display: grid;
        grid: repeat(1, 120px) / auto-flow 20%;
        align-items: center;
    }

    .grid>div {
        width: 120px;
        height: 80px;
        box-sizing: border-box;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .el-card__body {
        padding: 0;
    }

    .demonstration+div>b {
        font-size: 22px;
    }

    .demonstration>.el-divider__text {
        color: #8492a6;
    }
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
    <div class="flex">
        <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right"
            class="flex py-3">
            <el-form-item label="成员名称" prop="search_type" class="flex mb-0 pl-3 mr-3">
                <el-input v-model="search.name" placeholder="请成员名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initHtml" icon="el-icon-search">查询</el-button>
                <el-button @click="resetForm('search')">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="el-form flex py-3 pb-3">
            <el-form style="position: absolute; right: 60px">
                <el-form-item>
                    <el-button type="primary" @click="pullFromWorkWechat" icon="el-icon-download">同步企微</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
<div class="bg-white p-3">
    <!-- <div class="table-responsive py-3 flex">
       工具条 
        被锁定的部门信息不会被更新，其下级的员工信息也不会更新
    </div> -->
    <div class="table-responsive">
        <el-table ref="tableList" :data="tableData" v-loading="search.requesting" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column width="100" label="ID">
                <template slot-scope="scope">
                    <div class="flex flex-center pb-3">
                        {{scope.row.id}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="员工信息">
                <template slot-scope="scope">
                    <div class="flex">
                        <div class="flex-1">
                            <div class="flex flex-center pb-3">
                                <el-image v-if="scope.row.avatar" style="width: 30px; height: 30px" lazy
                                    class="rounded-circle mr-2" :src="scope.row.avatar"
                                    :preview-src-list="[scope.row.avatar]">
                                </el-image>
                                <el-image v-else style="width: 30px; height: 30px" lazy class="rounded-circle mr-2"
                                    :src="defaultAvatar(scope.row)"></el-image>
                                <div class="flex-1">
                                    {{scope.row.name}}
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="260" label="所在部门(主部门)">
                <template slot-scope="scope">
                    <div class="flex flex-center pb-3">
                        {{departmentTitle(scope.row.main_department)}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="120" label="客户数量">
                <template slot-scope="scope">
                    <div>{{0}}</div>
                </template>
            </el-table-column>
            <el-table-column width="80" label="授权状态">
                <template slot-scope="scope">
                    <div>
                        <el-tag size="mini" effect="dark" :type="status(scope.row.status)">
                            {{scope.row.status|statusTitle}}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="240" algin="center" label="导入时间/同步时间">
                <template slot-scope="scope">
                    <div class="flex flex-center">
                        {{scope.row.create_time}}
                    </div>
                    <div class="flex flex-center">
                        {{scope.row.update_time}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="180" label="锁定">
                <template slot-scope="scope">
                    <div>
                        <el-switch @change="setLocked(scope.row)" active-color="#ff4949" :active-value="1"
                            :inactive-value="0" class="py-3" v-model="scope.row.locked" active-text="禁止同步">
                        </el-switch>
                        <!-- <el-switch @change="setLocked(scope.row)" active-color="#13ce66" :active-value="1"
                            :inactive-value="0" class="py-3" v-model="scope.row.locked" active-text="禁止同步">
                        </el-switch> -->
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="120" label="操作">
                <template slot-scope="scope">
                    <div>
                        <el-button size="small" type="primary" @click="setCurrentDetail(scope.row)">员工详情</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 text-center">
        <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="search.page"
            :page-sizes="[10,50,100,200]" :page-size="search.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="search.total">
        </el-pagination>
    </div>
</div>
<el-drawer title="员工详情" :visible.sync="drawer" :before-close="handleClose" size="60%">
    <div class="h-100 w-100 p-2">
        <div class="flex flex-v-center demonstration">选取要筛选的时间段</div>
        <!-- <el-divider class="demonstration">选取要筛选的时间段</el-divider> -->
        <div class="block w-100 flex flex-v-center h-120px">
            <el-date-picker v-model="timeQuantum" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" @change="handleDateRangeChange">
            </el-date-picker>
        </div>
        <div class="w-100 mt-3 px-2 mb-3">
            <el-card class="flex flex-v-center py-1">
                <div class="grid w-80">
                    <div class="grid-item text-center">
                        <div class="demonstration">聊天总数</div>
                        <div><b>{{chat_cnt}}</b></div>
                    </div>
                    <div class="grid-item text-center">
                        <div class="demonstration">消息总数</div>
                        <div><b>{{message_cnt}}</b></div>
                    </div>
                    <div class="grid-item text-center">
                        <div class="demonstration">流失总数</div>
                        <div><b>{{negative_feedback_cnt}}</b></div>
                    </div>
                    <div class="grid-item text-center">
                        <div class="demonstration">发起申请总数</div>
                        <div><b>{{new_apply_cnt}}</b></div>
                    </div>
                    <div class="grid-item text-center">
                        <div class="demonstration">新增客户量</div>
                        <div><b>{{new_contact_cnt}}</b></div>
                    </div>
                </div>
            </el-card>
        </div>
        <el-divider class="demonstration">统计数据</el-divider>
        <el-table :data="currentDetails" v-loading="search.requesting" style="width: 100%;">
            <el-table-column label="日期">
                <template slot-scope="scope">
                    <div>
                        <!-- {{scope.row.start_time}}| -->
                        {{scope.row.stat_time|getDate}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="new_apply_cnt" label="发起申请">
            </el-table-column>
            <el-table-column prop="new_contact_cnt" label="新增客户数">
            </el-table-column>
            <el-table-column prop="chat_cnt" label="聊天总数">
            </el-table-column>
            <el-table-column prop="reply_percentage" label="聊天已回复率">
            </el-table-column>
            <el-table-column prop="avg_reply_time" label="平均回复时长(首次)">
            </el-table-column>
            <el-table-column prop="negative_feedback_cnt" label="流失客户(删除/拉黑)">
            </el-table-column>
        </el-table>
    </div>
</el-drawer>
{/block}
{block name="script"}
<!-- {js href="__PLUGIN_SRC__/Clipboard/clipboard.min.js"} -->
<script>
    const baseView = { view: XYBase.view, /*loading: false*/ }
    const avatar = { userAvatar: "{:config('xy_default_avatar.user')}", userAvatarWomen: "{:config('xy_default_avatar.user_women')}" }
    const department = JSON.parse('{:json_encode($departmentList)}')
    var name = '{:htmltostring(input("get.name"))}'
    const vm = new Vue({
        el: '#app',
        filters: {
            statusTitle(value) {
                if (value == 1) {
                    return '已授权'
                }
                if (value == 2) {
                    return '已禁用'
                }
                if (value == 4) {
                    return '未激活'
                }
                if (value == 5) {
                    return '已离职'
                }
            },
            getDate(value) {
                return XYBase.Date.date('Y-m-d', value * 1000)
            },
        },
        computed: {
            chat_cnt() {
                let result = 0;
                this.currentDetails.map(item => {
                    result += (item.chat_cnt ?? 0)
                })
                return result
            },
            message_cnt() {
                let result = 0;
                this.currentDetails.map(item => {
                    result += (item.message_cnt ?? 0)
                })
                return result
            },
            negative_feedback_cnt() {
                let result = 0;
                this.currentDetails.map(item => {
                    result += (item.negative_feedback_cnt ?? 0)
                })
                return result
            },
            new_apply_cnt() {
                let result = 0;
                this.currentDetails.map(item => {
                    result += (item.new_apply_cnt ?? 0)
                })
                return result
            },
            new_contact_cnt() {
                let result = 0;
                this.currentDetails.map(item => {
                    result += (item.new_contact_cnt ?? 0)
                })
                return result
            },
            time_quantum() {
                return this.timeQuantum.map(item => Math.floor(item / 1000))
            }
        },
        data() {
            return {
                /*使用展开运算符导入页面必须配置(不然全写在vm里太啰嗦了)*/
                ...baseView,
                ...avatar,
                department,
                search: {
                    name,
                    requesting: false,
                    page: 1,
                    pageSize: 15,
                    total: 0,
                },
                tableData: [],
                currentEmployee: null,
                currentDetails: [],
                timeQuantum: [new Date().getTime() - 3600 * 30 * 1000, new Date()],
                drawer: false,
            }
        },
        methods: {
            pullFromWorkWechat() {
                let _this = this
                if (this.search.requesting) {
                    return
                }
                this.requesting = true
                loading = XYBase.openloading('正在从企微同步：同步未导入的员工，更新未锁定的员工')
                $.ajax({
                    url: '/work-wechat/pull-employees',
                    type: 'POST',
                    success(res) {
                        loading.close()
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data.data
                            _this.total = res.total
                            XYBase.success(res.msg)
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        loading.close()
                        XYBase.error(XYBase.config.system_network_error)
                        console.log(xhr)
                    },
                    complete() {
                        _this.search.requesting = false
                    }
                })
            },
            setLocked(item) {
                $.ajax({
                    url: '?action=setLocked',
                    type: 'POST',
                    data: JSON.stringify({ id: item.id, locked: item.locked ? 1 : 0 }),
                    contentType: 'application/json;'
                })
            },
            initHtml() {
                let _this = this
                let msg = ''
                if (this.search.requesting) {
                    return
                }
                this.search.requesting = true
                $.ajax({
                    url: '',
                    data: _this.search,
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data.data
                            if (_this.tableData.length < 1) {
                                XYBase.msg('暂无数据~')
                            } else {
                                XYBase.success('获取成功')
                            }
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                        console.log(xhr)
                    },
                    complete() {
                        _this.search.requesting = false
                    }
                })
            },
            handleClose(done) {
                this.currentEmployee = null
                this.currentDetails = []
                done()
                // let _this = this;
                // this.$confirm('确认关闭？')
                //     .then(_ => {
                //         _this.currentEmployee = null
                //         _this.currentDetails = []
                //         done()
                //     })
                //     .catch(_ => { })
            },
            status(value) {
                if (value == 1) {
                    return 'success'
                }
                if (value == 2) {
                    return 'danger'
                }
                if (value == 4) {
                    return null
                }
                if (value == 5) {
                    return 'info'
                }
            },
            defaultAvatar(item) {
                if (item.gender == 2 || item.gender == '2') {
                    return this.userAvatarWomen
                }
                return this.userAvatar
            },
            setCurrentDetail(item) {
                let _this = this
                this.currentEmployee = item
                this.drawer = true
                this.handleDateRangeChange();
            },
            handleDateRangeChange(val) {
                let _this = this
                $.ajax({
                    url: '/work-wechat/employee-detail',
                    type: 'POST',
                    contentType: 'application/json;charset=utf-8;',
                    data: JSON.stringify({ ..._this.currentEmployee, time_quantum: _this.time_quantum }),
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            _this.currentDetails = res.data
                            // XYBase.success(res.msg)
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        XYBase.error(XYBase.config.system_network_error)
                        console.log(xhr)
                    },
                })
            },
            departmentTitle(value) {
                let title = ''
                this.department.map(item => {
                    if (item.id == value) {
                        title = item.title
                    }
                })
                return title
            },
            currentChange() {

            },
            sizeChange() {

            },
        },
        watch: {
            view: XYBase.viewWatch
        },
        created() {
            this.initHtml()
            // this.drawer = true
            XYBase.created(this)
        },
    })
</script>
{/block}